<template>
  <div class="box">
        <div class='app-container' :style="[{marginBottom: '-30px'}]">
  <el-form ref="form" label-width="80px" inline :model="form" >
  <el-form-item label="关键字" >
    <el-input v-model="form.id" palceholder='请输入'></el-input>
  </el-form-item>

 <el-form-item>
    <el-button type="primary" @click='delSearch' :style="[{backgroundColor : '#fff'}]">
      <span :style="{color : '#1f2326'}">清除</span>
      </el-button>
  </el-form-item>

  <el-form-item>
    <el-button type="primary" @click='search'>查询</el-button>
  </el-form-item>


 <el-form-item :style="[{marginLeft: '600px'}]">
    <el-button type="primary" @click='XinZeng'>新增用户</el-button>
  </el-form-item>


  </el-form>       
   </div>
 

    <div :style="{margin: '10px'}">
    <el-alert
    title=""
    type="info"
    close-text = ' '
    > 
     <span :style="[{fontSize: '18px'}]">共 {{counts}} 条记录</span>
    </el-alert>
    </div>
   

    <div class='app-container1'>
    <el-table style="width: 100%" :data='list1'>

      <el-table-column
        label="序号"
        prop="id"
        >
      </el-table-column>
      <el-table-column
        prop="email"
        label="邮箱"
        >
      </el-table-column>
      <el-table-column
        prop="phone"
        label="联系电话">
      </el-table-column>
         <el-table-column
        prop="username"
        label="用户名">
      </el-table-column>
       <el-table-column
        prop="permission_group_title"
        label="权限组名称">
        </el-table-column>
        <!-- status   售货机状态(0:未投放;1-运营;3-撤机) -->
        <el-table-column
        prop="role" 
        label="角色">
      </el-table-column>
      <el-table-column  
        label="操作">
        <template #default='{row}'>
          <el-button type="text" @click='xiuGai(row)'>修改</el-button>
          <el-button type="text" @click='del(row.id)'>删除</el-button>
        </template>
      </el-table-column>
      
    </el-table>
    </div>
   
       <!-- <users :text.sync='text'  :pageTitle.sync='pageTitle' :PermissionGroupsList.sync='PermissionGroupsList' :formBase.sync='formBase' :ruleInline.sync='ruleInline'></users> -->
        <users ref='users'></users>

      <div :style="{marginLeft: '750px'}">
         <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 50]"
      :page-size="+pagesize"
      layout="prev, pager, next,sizes, total,jumper"
      :total="+counts">
    </el-pagination>
   </div>

  </div>
</template>
 
<script>
  import users from '../components/userAdd.vue'
  import {list , remove} from '../../api/base/users'

export default {
  components:{
    users
  },

  data () {
    return {
       form:{

       },
       list1:[],
      //  text:1,
      //  pageTitle:1,
      //  PermissionGroupsList:[],
      //  formBase:[],
      //  ruleInline:[],
        currentPage: 1,
        counts:1,
        page:1,
        pages:1,
        pagesize:1
    }
  },

  created () {
    this.list()
  },

  methods: {
   async delSearch(){
        this.form = {}  
         this.list()  
    },
     async search(){
          const res =  await list({page:`1`,pagesize:'10'})
          
          const res1 = res.data.list.filter(item =>{
            return item.id == this.form.id
          })
           this.list1 = res1
     },
     //新增用户
     XinZeng(){
      console.log('1');
       this.$refs.users.centerDialogVisible = true
     },
  
    // 修改
     xiuGai(row){
      console.log(row);
       this.$refs.users.centerDialogVisible = true
      this.$refs.users.form = {...row}

     },

    //  删除
     async del(id){
     console.log(id);
      await this.$confirm('您确定删除该员工吗', '提示', {
      type: 'warning'
    })
    // remove
    await remove({id})
    this.$message.success('删除成功')
    this.list()
     },

      //  用户列表
      async list(){
      const res =  await list()
      console.log(res);
         console.log(res,'用户列表');
         this.list1 = res.data.list

         this.counts = res.data.counts
         this.page = res.data.page
         this.pages = res.data.pages
         this.pagesize = res.data.pagesize

      },

       handleSizeChange(val) {
        console.log(`每页 ${val} 条`);

      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);

      }
  }
}
</script>

<style scoped lang='less'>
   .box{
      background-color: #fff;
      margin: 10px;
   }
</style>
